<template>
  <div class="menu">
    <el-card>
      <div>
        <el-button size="small" @click="showMenu">添加菜单</el-button>
      </div>
      <MyTable
        ref="Table"
        :columns="columns"
        :fetchConfig="fetchConfig"
        :options="options"
      ></MyTable>
    </el-card>
    <addMenu ref="addMenu"></addMenu>
  </div>
</template>
<script lang="ts">
import {
  h,
  defineComponent,
  reactive,
  ref,
  onMounted,
  resolveComponent,
} from "vue";
import MyTable from "@/components/table.vue";
import moment from "moment";
import { FETCH_URLS } from "@/config";
import addMenu from "@/views/menu/addMenu.vue";
type IFetchConfig = {
  url: string;
  method?: "get" | "post";
  params?: {
    [name: string]: string;
  };
  shouldPagination?: boolean;
};

export default defineComponent({
  components: {
    MyTable,
    addMenu,
  },
  setup() {
    const addMenu = ref();
    const Table = ref();
    const options = reactive<any>({});

    const columns = reactive<any[]>([
      {
        label: "ID",
        dataIndex: "id",
        width: 80,
      },
      {
        label: "菜单名称",
        dataIndex: "name",
      },
      {
        label: "前端图标",
        dataIndex: "icon",
      },
      {
        label: "排序",
        dataIndex: "orderNum",
        width: 100,
      },
      {
        label: "创建时间",
        dataIndex: "createdTime",
        render: (value: string) => {
          let formatter = moment(value).format("YYYY-MM-DD HH:mm:ss");
          return formatter;
        },
      },
      {
        label: "操作",
        render: (value: any) => {
          return h("div", null, {
            default: () => [
              h(
                resolveComponent("ElButton"),
                {
                  type: "text",
                  onClick: () => {
                    deleMenu(value);
                  },
                },
                () => ["删除"]
              ),
              h(
                resolveComponent("ElButton"),
                {
                  type: "text",
                  onClick: () => {
                    deleMenu(value);
                  },
                },
                () => ["编辑"]
              ),
            ],
          });
        },
      },
    ]);
    const deleMenu = (values: any) => {
      console.log(values);
    };
    const fetchConfig = reactive<IFetchConfig>({
      url: FETCH_URLS.SYSTEM_MENULIST,
    });
    const showMenu = () => {
      addMenu.value?.initShow();
    };
    onMounted(() => {
      Table.value?.fetch();
    });
    return {
      Table,
      columns,
      fetchConfig,
      options,
      addMenu,
      showMenu,
    };
  },
});
</script>
<style lang="scss" scoped></style>
